@container: container;

@columns-name: col;
@columns-padding: var(--column-padding);
@grid-count: 24;

@container-fluid: 100%;
// 最小
@xs-screen-min: 768px;
@xs-container: 768px;
// 小
@sm-screen-min: 980px;
@sm-container: 980px;
// 中
@md-screen-min: 1024px;
@md-container: 1024px;
// 大
@lg-screen-min: 1680px;
@lg-container: 1680px;

:root {
  --column-padding: 15px;
  --columns: @grid-count;
}
.container,
.container-fluid {
  padding-left: @columns-padding;
  padding-right: @columns-padding;
  margin-right: auto;
  margin-left: auto;
  min-width: 960px;/*为了兼容不支持媒体选择的浏览器*/

  transition: width 0.5s cubic-bezier(1,-0.02, 0, 1.04);
  box-sizing: border-box;
}

.container-fluid {
  min-width: 0;
  width: 100%;
}

// 媒体查询
.container {
  @media (max-width: @xs-screen-min) {
    min-width: 0;
    width: @container-fluid;
  }
  @media (min-width: @xs-screen-min) {
    width: @xs-container;
    min-width: 0;
  }
  @media (min-width: @sm-screen-min) {
    width: @sm-container;
    min-width: 0;
  }
  @media (min-width: @md-screen-min) {
    width: @md-container;
    min-width: 0;
  }
  @media (min-width: @lg-screen-min) {
    width: @lg-container;
    min-width: 0;
  }
}

.row {
  min-height: 1px;
  margin-left: calc(0 - @columns-padding);
  margin-right: calc(0 - @columns-padding);
  clear: both;
  &::before,
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

// 列基础css
[class*="col-"] {
  position: relative;
  min-height: 1px;
  padding-right: @columns-padding;
  padding-left: @columns-padding;

  box-sizing:border-box;
}

// 循环列，设置基础css
/*.make-grid-columns(@len: @grid-count) {
  .col(@i, @list) when (@i =< @len) {
    @classList: ~".@{columns-name}-@{i},.@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-lg-@{i}";
    .col(@i + 1, ~"@{classList},@{list}");
  }
  .col(@i, @list) when (@i > @len) {
    @{list} {
      position: relative;
      min-height: 1px;
      padding-right: @columns-padding;
      padding-left: @columns-padding;
    
      box-sizing:border-box;
    }
  }
  .col(1, ~"")
}
.make-grid-columns(@grid-count);*/

// 循环生成列
.make-columns-loop(@type, @i: 1) when (@i <= @grid-count) {
  @col-class-name: ~"@{columns-name}@{type}";
  .@{col-class-name}-@{i}{
    width: calc(~"@{i} / var(--columns) * 100%");
    float: left;
  }
  // 偏移
  .@{col-class-name}-offset-@{i}{
    margin-left: calc(~"@{i} / var(--columns) * 100%");
  }
  // 排序
  .@{col-class-name}-pull-@{i}{
    right: calc(~"@{i} / var(--columns) * 100%");
  }
  .@{col-class-name}-push-@{i}{
    left: calc(~"@{i} / var(--columns) * 100%");
  }
  .make-columns-loop(@type, (@i + 1));
}


// 媒体查询设置对应列类型css
.make-columns-loop(~"");

@media (min-width: @xs-screen-min) {
  .make-columns-loop(-xs);
}
@media (min-width: @sm-screen-min) {
  .make-columns-loop(-sm);
}
@media (min-width: @md-screen-min) {
  .make-columns-loop(-md);
}
@media (min-width: @lg-screen-min) {
  .make-columns-loop(-lg);
}

